<template>
    <div class="survey container-content">
        <div class="app-view-box">
            <el-row>
                <el-col :span="24">
                    <h3 class="panel-title">采购订单</h3>
                </el-col>
            </el-row>
            <el-divider class="divider"></el-divider>
            <el-row class="export-container">
                <el-button type="primary" size="small" @click="addNewData"
                    >新增</el-button
                >
                <el-button type="primary" size="small" @click="exporting"
                    >导出</el-button
                >
                <!-- <el-dropdown
          style="margin-left: 10px"
          trigger="click"
          @command="handleCommand"
        >
          <el-button size="small" type="primary">
            业务操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="edit">修改变更</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> -->
            </el-row>
            <el-row class="filter-container">
                <el-col :span="24">
                    <el-input
                        placeholder="查询..."
                        v-model="searchValue"
                        class="input-with-select"
                        @change="searchData"
                    >
                        <el-button
                            slot="append"
                            icon="el-icon-search"
                            type="primary"
                            @click="searchData"
                        ></el-button>
                    </el-input>
                </el-col>
            </el-row>
            <el-table
                ref="customerTable"
                :data="tableData"
                stripe
                border
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <!-- @selection-change="handleSelectionChange" -->
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column
                    type="index"
                    label="序号"
                    width="55"
                    align="center"
                />
                <el-table-column prop="orderNumber" label="单据编号">
                    <template slot-scope="scope">
                        {{ scope.row.orderNumber || "--" }}
                    </template>
                </el-table-column>
                <el-table-column prop="materialCode" label="物料编码">
                    <template slot-scope="scope">
                        {{ scope.row.materialCode || "--" }}
                    </template>
                </el-table-column>
                <el-table-column prop="materialName" label="物料名称">
                    <template slot-scope="scope">
                        {{ scope.row.materialName || "--" }}
                    </template>
                </el-table-column>
                <el-table-column prop="supplierName" label="供应商名称">
                    <template slot-scope="scope">
                        {{ scope.row.supplierName || "--" }}
                    </template>
                </el-table-column>
                <el-table-column prop="applyTime" label="采购日期">
                    <template slot-scope="scope">
                        {{ scope.row.applyTime || "--" }}
                    </template>
                </el-table-column>
                <el-table-column prop="number" label="数量">
                    <template slot-scope="scope">
                        {{ scope.row.number || "--" }}
                    </template>
                </el-table-column>
                <el-table-column prop="purchaseUnit" label="采购单位">
                    <template slot-scope="scope">
                        {{ scope.row.purchaseUnit || "--" }}
                    </template>
                </el-table-column>

                <el-table-column prop="totalTaxPrice" label="价税总计">
                    <template slot-scope="scope">
                        <span v-if="scope.row.totalTaxPrice >= 0">{{
                            "￥" + scope.row.totalTaxPrice
                        }}</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column prop="isGiveaway" label="是否赠品">
                    <template slot-scope="scope">
                        <el-tag v-if="!scope.row.isGiveaway" type="danger"
                            >否</el-tag
                        >
                        <el-tag v-if="scope.row.isGiveaway" type="success"
                            >是</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                    <template slot-scope="scope">
                        {{ scope.row.createTime || "--" }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="详情"
                            placement="bottom"
                        >
                            <el-button
                                plain
                                icon="el-icon-more"
                                @click="handleDetail(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="编辑"
                            placement="bottom"
                        >
                            <el-button
                                type="primary"
                                plain
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                        <el-tooltip
                            class="item"
                            effect="dark"
                            content="删除"
                            placement="bottom"
                        >
                            <el-button
                                type="danger"
                                plain
                                icon="el-icon-delete"
                                @click="handleDelete(scope.$index, scope.row)"
                            ></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            class="table-pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            background
        >
        </el-pagination>
        <!-- 弹出框 -->
        <el-drawer
            v-if="drawer"
            :title="rowId ? '编辑采购订单' : '新增采购订单'"
            :visible.sync="drawer"
            direction="rtl"
            :before-close="handleClose"
            size="100%"
            destroy-on-close
        >
            <div class="drawer-content">
                <FormCom ref="formRef" :rowId="rowId" />
            </div>
            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="primary" @click="submit">保存</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { getOrderList, deleteOrderList } from "@/api/system/purchase";
import FormCom from "./add/index";
export default {
    components: { FormCom },
    data() {
        return {
            searchValue: "",
            tableData: [],
            currentPage: 1, //当前页
            pageSize: 10, //每页条数
            total: 0,
            rowId: "",
            drawer: false,
            limit: 10,
            page: 1,
        };
    },
    watch: {
        "$store.state.workflow.businessDrawer": {
            handler(val) {
                if (!val) {
                    this.getData();
                }
            },
        },
    },
    methods: {
        exporting() {},
        // 获取列表请求
        getData() {
            let params = {
                limit: this.limit,
                page: this.page,
            };
            getOrderList(params).then((res) => {
                if (res.code === 200) {
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                }
            });
        },
        // 删除事件
        handleDelete(index, row) {
            this.$confirm("请确定要删除所选的记录吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteOrderList(row.id).then((res) => {
                        if (res.code === 200) {
                            this.tableData.splice(index, 1);
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getData();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 搜索事件
        searchData() {
            // let searchValue = this.searchValue;
            // searchSurvey({ searchValue }).then((res) => {
            //   this.tableData = res.rows;
            //   console.log("请求成功", res);
            // });
        },
        //新增按钮
        addNewData() {
            this.$store.dispatch("workflow/getModel", {
                menuId: this.$route.meta.menuId,
                type: "launch",
                businessType: "5",
            });
        },
        //编辑按钮
        handleEdit(index, row) {
            this.rowId = row.id;
            this.drawer = true;
        },
        // 详情按钮
        handleDetail(index, row) {},
        // 取消
        cancelForm() {
            this.drawer = false;
            this.rowId = "";
            this.getData();
        },
        // 关闭 drawer
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                    this.rowId = "";
                    this.getData();
                })
                .catch((_) => {});
        },
        //业务操作
        handleCommand(type) {
            this.drawer = true;
        },
        handleSelectionChange(val) {
            this.rowId = val[0].id;
        },
        submit() {
            const cb = () => {
                this.drawer = false;
                this.getData();
            };
            this.$refs.formRef.submit(cb);
        },
        //分页器size
        handleSizeChange(val) {
            this.limit = val;
            this.getData();
        },
        //分页器当前页
        handleCurrentChange(val) {
            this.page = val;
            this.getData();
        },
    },
    created() {
        this.getData();
    },
};
</script>
<style lang="scss" scoped>
.divider {
    margin: 0;
}
.export-container {
    margin: 15px 0;
}
.pagination {
    margin-top: 10px;
}
</style>
